<template>
    <div id="view2Div">
        <div v-if="isTrue" class="bodyStyle">
            <div class="todayHostspotTitle">
                <span>今日热点</span>
            </div>
            <ul class="todayHostspot">
                <li v-for="(item, index) in dataList1" :key="index" @click="View2Cilck(item.id)">{{ item.name }}</li>
            </ul>

            <div class="todayHostspotTitle">
                <span>抗癌咨询</span>
            </div>
            <list :dataList="dataList" @listId="listId" />

            <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalPopulation">
            </el-pagination>
        </div>

        <div v-else class="bodyStyle">
            <View2Detail :idList="idList" />
        </div>
            <div v-if="isTrue1" class="poabs"><span style="margin: 0 5px 0 0;cursor: pointer;" @click="return_text"><code>&lt;</code></span></div>

    </div>
</template>

<script>
import list from "@/components/list"
import View2Detail from "@/components/View2Detail"
export default {
    name: 'View2',
    data() {
        return {
            // 一共多少条数据
            totalPopulation: 100,
            
            isTrue: true,
            isTrue1 : false,
            dataList1:[],
            dataList:[],
            idList: []
        };
    },
    components: {
        list,
        View2Detail
    },
    mounted() {
        this.pagesize()
        this.axios.get("/api/wanxin/as").then((success) => {
            this.dataList1 = [];
            let lens = 10
            if (success.data.length < 10) {
                lens = success.data.length
            }
            for (let i = 0; i < lens; i++) {
                let newData = {
                    id: success.data[i].id,
                    name: success.data[i].title,
                    date: success.data[i].publication_date,
                    img: [success.data[i].img_src],
                    textBody: success.data[i].content,
                }
                // console.log(newData);
                this.dataList1.push(newData);
                // this.dataList1.push(success.data[index]);
            }
            this.totalPopulation = success.data.length
        })
    },

    methods: {
        pagesize(pagenum = 1, pagesize = 10) {
            this.dataList = [];
            this.axios.get("/api/wanxin/as/page", {
                params: {
                    pagenum: pagenum,
                    pagesize: pagesize
                }
            }).then((success) => {
                // console.log(success.data);
                for (let i = 0; i < success.data.length; i++) {
                    // console.log(success.data[i].title);
                    let newData = {
                        id: success.data[i].id,
                        name: success.data[i].title,
                        date: this.formatDate(success.data[i].publicationDate),
                        img: [success.data[i].imgSrc],
                        textBody: success.data[i].content,
                    }
                    // console.log(newData.textBody);
                    this.dataList.push(newData);
                }
                // this.dataList.splice(0, 1);
                // console.log(this.dataList);
            })
        },
        formatDate(dateString) {
            if (!dateString) return ''; // 处理空日期
            const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
            return new Date(dateString).toLocaleString('zh-CN', options);
        },
        return_text() {
            this.isTrue = true
            this.isTrue1 = false
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagesize(val)
        },
        View2Cilck(id) {
            console.log(id);
            this.listId(id)
        },
        listId(id) {
            console.log(id);
            if (id) {
                this.isTrue = false
                this.isTrue1 = true
            }
            for (let i = 0; i < this.dataList.length; i++) {
                // console.log(this.dataList[i]);
                if (this.dataList[i].id == id) {
                    this.idList = this.dataList[i]
                }
            }
            window.scrollTo(0, 440)
            // console.log(this.idList);
        }
    },
};
</script>

<style scoped>
#view2Div{
    width: 75rem;
    margin: 0 auto;
}
.poabs{
    position: absolute;
    top: 34.33rem;
    font-size: 1.3rem;
    left: 17.5rem;
}
.bodyStyle {
    position: relative;
    width: 80%;
    height: auto;
    margin: 3rem auto;
}

.todayHostspotTitle {
    border-bottom: 0.125rem solid #eee;
    padding-bottom: 0.7rem;
    margin: 2rem 0 0.625rem;
}

.todayHostspotTitle>span {
    font-weight: bold;
    font-size: 1.3rem;
    padding-bottom: 0.7rem;
    border-bottom: 0.125rem solid #648AFF;
}

.todayHostspot {
    /* list-style: disc; */
    margin-top: 1rem;
}

.todayHostspot li {
    margin: 0.77rem 0;
    cursor: pointer;
    letter-spacing: 0.145rem;
}

.todayHostspot li:nth-child(1) {
    font-weight: bold;
    font-size: 1.12rem;
}

.todayHostspot li:before {
    content: "";
    margin-bottom: 0.1875rem;
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    background-color: #D8D8D8;
    border-radius: 50%;
    margin-right: 0.3125rem;
}
</style>